<template>
	<view class="top-bar">
		<i class="iconfont" @click="back">&#xe617;</i>
		<input type="text" v-model:value="keywords" :placeholder="hot" @confirm="search"/>
	</view>
</template>
 
<script>
	import {keySearch} from "@/network/axios/search/keySearch"
	
	export default {
		name: '',
		props: {
			hot: String,
			default: ""
		},
		data(){
			return {
				keywords: "",
				result: []
			}
		},
		methods:{
			async search(e) {
				//1、根据关键词搜索
				const { data: res } = await keySearch(this.keywords)
				this.result = res.result.songs
				this.$store.commit("updataSearch", this.result)
				// keySearch(this.keywords).then(res => {
				// 	this.result = await res.data.result.songs
				// 	//2、上传搜索结果
				// 	this.$store.commit("updataSearch", this.result)
				// })
				
				//3、跳转页面
				uni.navigateTo({
					url: `./SeResult?keywords=${this.keywords}`
				})
				
				//4、添加历史搜索记录
				if(window.localStorage.getItem(`music-${e.detail.value}`)) return
				window.localStorage.setItem(`music-${e.detail.value}`, e.detail.value)			
			},
			back() {
				uni.navigateBack({
					animationType: "slide-out-right",
					animationDuration: 3000
				})
			}
		}
	}
</script>
 
<style lang="less" scoped>
	.top-bar {
		display: flex;
		padding: 10px 20upx 0 20upx;
		margin-bottom: 20px;
		i {
			font-size: 50upx;
		}
		input {
			margin-left: 20upx;
			width: 590upx;
			border-bottom: 1px solid #bdc3c7;		
		}
	}
</style>
